<template>
  <div class="body">
    <el-carousel :interval="4000" type="card" height="800px">
      <el-carousel-item>
        <el-select v-model="student.city" filterable placeholder="请选择城市" style="margin-left: 5px;">
          <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="student.major" filterable placeholder="请选择专业" style="margin-left: 5px;">
          <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="student.enrollmentYear" filterable placeholder="请选择年份" style="margin-left: 5px;">
          <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" style="margin-left: 5px;" @click="loadPost()">查询</el-button>
        <div class="box" id="container1" style="height:600px;weight:400px"> </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="box" id="container2"> </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="box" id="container3"> </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
  name: 'Echarts',
  components:{ },
  data(){
    return{
      // 双向绑定 下拉数据的初始值
      student: {
                name: '',
                city: '',
                major: '',
                enrollmentYear: ''
            },
            citys: [
                {
                    value: '北京',
                    label: '北京'
                }, {
                    value: '上海',
                    label: '上海'
                }, {
                    value: '广州',
                    label: '广州'
                }, {
                    value: '深圳',
                    label: '深圳'
                },
            ],
            majors: [
                {
                    value: '计算机科学',
                    label: '计算机科学'
                }, {
                    value: '物理学',
                    label: '物理学'
                }, {
                    value: '英语文学',
                    label: '英语文学'
                }, {
                    value: '化学工程',
                    label: '化学工程'
                }, {
                    value: '经济学',
                    label: '经济学'
                },

            ],
            years: [
                {
                    value: 2023,
                    label: 2023
                }, {
                    value: 2022,
                    label: 2022
                }, {
                    value: 2021,
                    label: 2021
                }, {
                    value: 2020,
                    label: 2020
                },
            ]
    }

  },
  methods: {
    loadPost(){
      this.$axios.post(this.$httpUrl + '/students/echart1', this.student).then(res => res.data).then(res => {
                console.log(res)
                this.drawChart(res)
            })
    },
    drawChart(data) {
            console.log(data)
            var chartDom = document.getElementById('container1');
            console.log(chartDom)
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom).dispose();
            }
            var myChart = echarts.init(chartDom);
            var option = {
                xAxis: {
                    type: 'category',
                    data: data.name
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: data.data,
                        type: 'line'
                    }
                ]
            };
            option && myChart.setOption(option);
            console.log(myChart)
        }

  }
}
</script>
  
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>